<template>
  <div>
    <h1>找电影</h1>
    <el-tag
      class="tag-item"
      :class="tabIndex === index ? 'active' : ''"
      @click="tabTypeClick(index, item)"
      v-for="(item, index) in movieTypeArr"
      :key="item"
    >
      {{ item }}
    </el-tag>
    <hr />
    {{ timeIndex }}
    <el-tag
      class="tag-item"
      :class="timeIndex === index ? 'active' : ''"
      @click="tabTimeClick(index, item)"
      v-for="(item, index) in timeArr"
      :key="item"
    >
      {{ item }}
    </el-tag>

    <div class="movie-list">
      <template v-for="item in movieList">
        <MovieListItem :key="item.id" :item="item"></MovieListItem>
      </template>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import MovieListItem from '../components/MovieListItem.vue'
export default {
  components: { MovieListItem },
  computed: {
    ...mapState(['movieTypeArr', 'timeArr', 'movieList']),
  },
  data() {
    return {
      tabIndex: null,
      timeIndex: null,
    }
  },
  methods: {
    ...mapMutations(['filter_movie_list']),
    tabTypeClick(index, item) {
      this.tabIndex = index
      this.filter_movie_list({ type: 'movieType', value: item })
    },
    tabTimeClick(index, item) {
      this.timeIndex = index
      this.filter_movie_list({ type: 'rt', value: item })
    },
  },
}
</script>

<style lang="scss" scoped>
.movie-list {
  display: flex;
  flex-wrap: wrap;
  ul {
    padding: 10px;
    margin: 10px;
    cursor: pointer;
    .movie-name {
      width: 100px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
.tag-item {
  margin: 5px;
  padding: 5px;
  cursor: pointer;
}
.active {
  background: red;
  color: #fff;
}
</style>
